<!--
Date: 2025-08-13
Copyright (c) 2025 CAX Conversion Project
-->
<template>
  <div class="data-source">
    <el-tabs v-if="showList" v-model="activeName" type="border-card" @tab-change="handleClick">
      <el-tab-pane label="实时任务" name="REAL_TIME_SYNC">
        <TaskList v-if="activeName === 'REAL_TIME_SYNC' && showList" :taskType="activeName" @handleEvent="handleEvent" />
      </el-tab-pane>
      <el-tab-pane label="离线任务" name="OFFLINE_SYNC">
        <TaskList v-if="activeName === 'OFFLINE_SYNC'" :taskType="activeName" @handleEvent="handleEvent" />
      </el-tab-pane>
    </el-tabs>
    <TaskOperation v-if="showAdd" :taskType="activeName" :rowId="rowData" :operationType="operationType" @handleEvent="handleEvent"/>
  </div>
</template>
<script setup>
import { ref } from 'vue';
import TaskList from './component/TaskList.vue';
import TaskOperation from './component/TaskOperation.vue';
const activeName = ref('REAL_TIME_SYNC');
const showList = ref(true);
const showAdd = ref(false);
const rowData = ref(null);
const operationType = ref(null);
// 卡片点击事件
const handleClick = (tab) => {
  activeName.value = tab;

};
const handleEvent = (data) => {
  if (data.component === 'TaskList') {
    showList.value = false;
    activeName.value = data.type;
    showAdd.value = false;
    showList.value = true;
  }
  if (data.component === 'TaskOperation') {
    showList.value = false;
    showAdd.value = true;
    rowData.value = data.rowId;
    operationType.value = data.operationType;
  }
};
</script>
<style lang="scss" scoped>
.reault_main {
  padding: 0.5rem;
  height: calc(100vh - 84px);
  overflow: scroll;
}
</style>
    